<template>
  <view>
    <!-- 加入placeholder就可以把顶部撑下来 -->
    <uv-navbar title="添加沟通记录" border left-icon="" placeholder></uv-navbar>
  </view>

  <!-- 页面主要部分 -->
  <view class="body-container">
    <!-- <uv-input type="text" placeholder="测试用"></uv-input> -->
    <uv-form :model="comment" :rules="rules" ref='form' label-width="130rpx">
      <uv-form-item label="联系人" prop="contact" border-bottom>
        <!-- 重名命题暂未考虑 -->
        <uv-input v-model="comment.contact" type="text" placeholder="请输入联系人姓名关键字" @blur="searchContact" @confirm="searchContact"></uv-input>
      </uv-form-item>
      <uv-form-item label="沟通主题" prop="subject" border-bottom>
        <uv-input v-model="comment.subject" type="text" placeholder="主题,建议不超过7个字"></uv-input>
      </uv-form-item>
      <uv-form-item label="沟通内容" prop="content" border-bottom>
        <uv-textarea v-model="comment.content" placeholder="请输入内容" height="500rpx"></uv-textarea>
      </uv-form-item>
      <uv-form-item label="关联机构" prop="refer" border-bottom>
        <uv-input v-model="comment.refer" type="text" placeholder="请输入机构名称关键字" @blur="searchOrg" @confirm="searchOrg"></uv-input>
      </uv-form-item>
    </uv-form>
  </view>
  
  <view>
    <!-- picker部分 -->
    <uv-picker ref="picker" :columns="pickerColumns" keyName="label" @confirm="pickerConfirm"></uv-picker>
    <!-- modal部分 -->
    <uv-modal ref="modal" :title="mTitle" :content='mContent' @confirm="modalConfirm" showCancelButton></uv-modal>
  </view>

  <view>
    <!-- 底部 -->
    <bottomTab type='submit'></bottomTab>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import getStorageItem from '@/utils/getStorageItem';
  import nx from '@/nx';
  import {onLoad, onUnload} from '@dcloudio/uni-app'

  defineOptions({
    name: "addComment",
  })
  
  const orgApi = nx.$api.organization
  const commentApi = nx.$api.comment
  const contactApi = nx.$api.contact
  
  const picker = ref()
  const modal = ref()
  const mTitle = ref("")
  const mContent = ref("")
  
  const comment = ref({
    contact: '', // 联系对象
    contactId: '', // 联系人id
    subject:'',  // 沟通主题
    content: '', // 具体内容
    refer: '', // 关于谁的
    referId: '', // 关于的企业id
  })
  const pickerColumns = ref([])
  
  const searchOrg = async () => {
    let resp = await orgApi.getOrgList({
      searchOrg: comment.value.refer
    })
    if (resp.code === 200 ){
      // 考虑数据不存在
      if (resp.data.length > 0) {
        const orgList = resp.data.map(item => {return {id: item._id, label: item.fullname, type:'organization'}})
        pickerColumns.value[0]=orgList
        console.log(pickerColumns.value);
        picker.value.open()
      } else {
        mTitle.value = '机构不存在'
        mContent.value = `是否添加机构：${comment.value.refer}？`
        modal.value.by = 'organization'  // 给modal添加一个属性，区分之后请求路径
        // console.log(modal.value);
        modal.value.open()
      }
    }
  }
  
  const searchContact = async () => {
    let resp = await contactApi.getContactList({
      name: comment.value.contact
    })
    if (resp.code === 200 ){
      if (resp.data.length > 0){
        console.log(resp.data);
        const contactList = resp.data.map(item => {return {id: item._id, label: item.name,type:'contact'}})
        pickerColumns.value[0]=contactList
        // console.log(pickerColumns.value);
        picker.value.open()
      }else{
        mTitle.value = '联系人不存在'
        mContent.value = `是否添加联系人：${comment.value.contact}？`
        modal.value.by = 'contact'  // 给modal添加一个属性，区分之后请求路径
        // console.log(modal.value);
        modal.value.open()
      }
    }
  }
  const pickerConfirm = (e) => {
    // console.log(e);
    if (e.value[0].type === 'organization'){
      // 根据type标签确定是那个的下拉框
      comment.value.refer = e.value[0].label
      comment.value.referId = e.value[0].id
    }
    if (e.value[0].type === 'contact'){
      // 根据type标签确定是那个的下拉框
      // console.log('触发org记录');
      comment.value.contact = e.value[0].label
      comment.value.contactId = e.value[0].id
    }
  }
  const modalConfirm = async () => {
    if (modal.value.by === 'contact'){
      let resp = await contactApi.addContact({name:comment.value.contact})
      if (resp.code === 200){
        comment.value.contactId = resp.data.id
        uni.showToast({
          title: '添加成功，请及时前往详情页完善信息',
          icon:'none',
        })
        console.log("添加完联系人后", comment.value);
      }
    }
    if (modal.value.by === 'organization'){
      let resp = await orgApi.addOrganization({fullname:comment.value.refer})
      if (resp.code === 200){
        comment.value.referId = resp.data.id
        uni.showToast({
          title: '添加成功，请及时前往详情页完善信息',
          icon:'none',
        })
        console.log("添加完机构后", comment.value);
      }
    }
    
  }
  const submit = async () => {
    console.log('发送的data',comment.value);
    let resp = await commentApi.addComment(comment.value)
    if (resp.code === 200){
      uni.showToast({
        title: '添加成功',
        icon: 'success'
      })
      // 返回上一页
      uni.navigateBack(1)
    } 
  }
  onLoad(() => {
    uni.$on('bottomTabSubmit', () => {
      submit()
    })
  })
  
  // onUnload(() => {
  //   uni.$off('bottomTabSubmit')
  // })
  
</script>

<style lang="scss" scoped>
  .body-container {
    margin: 30rpx;
  }
</style>